<template>
  <el-dialog title="角色信息" :visible.sync="visible" @close="closeHandle"  width="30%">
    <el-form :model="role" ref="roleForm" :rules="rules" :label-width="formLabelWidth">
      <el-row :gutter="20">
        <el-form-item  v-show="false">
          <el-input  v-model="role.id" auto-complete="off"></el-input>
        </el-form-item>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input  v-model="role.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代码" prop="value">
            <el-input  v-model="role.value"  auto-complete="off"></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item  label="权重" prop="weight">
            <el-input-number size="small" v-model="role.weight" :min="setRoleWeightMin()" :max="100" :step="1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-show="role.id"  label="是否可用" prop="disabled">
            <el-switch  v-model="role.disabled"> </el-switch>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="submitEdit">确 定</el-button>

    </div>
  </el-dialog>
</template>

<script>
  import {saveOrUpdate} from '@/api/sys/role/';
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        visible: false,
        role:{
            disabled: true
        },
        formLabelWidth:'80px',
        rules: {
          name: [
            {required: true, message: '请输入角色名称', trigger: 'blur'}
          ],
          value: [
            {required: true, message: '请输入角色代码', trigger: 'blur'},
          ]
        },
      }
    },
    computed: {
      ...mapGetters([
        'roles'
      ])
    },
    methods: {
      init(row){
        let that =this;
        this.visible =true;
        this.$nextTick(()=> {
          if(row){
            if(row.id){
              that.role = Object.assign({},row);
            }
          }

        })

      },
      setRoleWeightMin(){
        let minWeight = this.roles[0].weight;
          this.roles.filter((currentValue,index)=>{
            if(minWeight > currentValue.weight){
                minWeight = currentValue.weight
            }

          });

        return minWeight;

      },


      submitEdit(){
        let that = this;
        this.$refs.roleForm.validate(function(valid){
          if(valid){

            saveOrUpdate(that.role).then(function (result) {
              let {code,msg} =result.data;
              if(code == '0'){
                that.$message({
                  type: 'success',
                  message: msg
                });
                that.visible = false;
                that.$emit('refreshDataList');
              }else{
                that.$message.error('执行失败,'+msg);
              }
            }).catch(function (error) {
             // that.$message.error('执行失败,未知异常请联系管理员');
            });
          }
        });


      },

      closeHandle(){
        this.$refs['roleForm'].resetFields();
        this.visible=false;

      }
    }



  }

</script>
